<template>
  <cjui-page-panel header="浮动球">
    <template #intro>
      右键点击下方按钮改变浮动球配置。
    </template>
    
    <div>
      <el-button type="primary" @click="floatBallConfig.visible = !floatBallConfig.visible">
        开启浮动球
      </el-button>
      <el-button type="primary" @click="floatBallConfig.boundaryRight = floatBallConfig.boundaryRight ? 0 : 100">
        切换右边界距离100px
      </el-button>
      <el-button type="primary" @click="floatBallConfig.adsorbauto = floatBallConfig.adsorbauto ? false : 'auto'">
        切换边界自动吸附
      </el-button>
      <el-button type="primary" @click="floatBallConfig.halfHidden = floatBallConfig.halfHidden ? false : true">
        切换边界时是否隐藏半边
      </el-button>
    </div>
    
    <CjuiFloatBall
      v-if="floatBallConfig.visible"
      :boundaryRight="floatBallConfig.boundaryRight"
      :adsorbauto="floatBallConfig.adsorbauto"
      :halfHidden="floatBallConfig.halfHidden"
    >
      FloatBall
    </CjuiFloatBall>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
const floatBallConfig = reactive({
  visible: false,
  boundaryRight: 0,
  adsorbauto: false,
  halfHidden: false
})
</script>

<style lang="scss" scoped>
</style>
